<template>
	<view class="dialog-bg" @tap="close()">
		<view class="dialog-body" @tap.stop="">
			<view class="dialog-header">
				<view class="dialog-name">{{title}}</view>
				<!-- <view class="icon-box"><i class="icon" @tap="close()">&#xe634;</i></view> -->
					<image @tap="close()" src="../../static/tabbar-img/20190917174158.png" mode=""></image>
			</view>
			<view class="dialog-content">
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{title :{}},
		methods:{
			close(){
				this.$emit('close')
			}
		}
		
	}
</script>

<style lang="scss">
	.dialog-bg{position: fixed;width: 100%;height: 100%;background: rgba(0,0,0,0.3);top:0;left:0;z-index: 9;overflow: hidden;}
	.dialog-body{width:100%;background: #FFFFFF;border-top-left-radius: 50upx;border-top-right-radius: 50upx;position: absolute;bottom: 0;}
	.dialog-header{width: calc(100% - 40upx);padding:20upx;height: 80upx;position: relative;overflow: hidden;border-bottom: 1upx solid #e1e1e1;line-height: 80upx;}
	.dialog-header .icon-box {float: right;width: 40upx;height:40upx;border:1upx solid #333;border-radius: 50%;text-align: center;line-height: 40upx;margin-top:16upx}
	.dialog-name{float: left;font-weight: bold;font-size: 34upx;}
	.dialog-header {
					
						image {
							width: 46upx;
							height: 46upx;
							float: right;
							margin-top: 16upx;
						}
					}
</style>
